<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .container {
            max-width: 1200px;
            padding: 20px;
            width: 100%;
        }

        .game-info {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .game-area {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        .game-canvas {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .game-stats {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            min-width: 200px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .score {
            font-size: 24px;
            margin-bottom: 20px;
        }

        .leaderboard {
            margin-top: 20px;
        }

        .leaderboard h3 {
            margin-bottom: 10px;
        }

        .leaderboard-list {
            list-style: none;
        }

        .leaderboard-item {
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }

        .controls {
            margin-top: 20px;
            text-align: center;
        }

        .btn {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }

        .btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .game-area {
                flex-direction: column;
            }

            .game-canvas {
                width: 100%;
                height: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="game-info">
            <h2>贪吃蛇游戏说明</h2>
            <p>使用键盘方向键或触摸屏控制蛇的移动方向，吃到食物可以增加分数和长度。注意不要撞到墙壁或自身！</p>
            <p>适用平台：PC端（键盘控制）和移动端（触摸屏控制）</p>
        </div>

        <div class="game-area">
            <canvas id="gameCanvas" class="game-canvas"></canvas>
            
            <div class="game-stats">
                <div class="score">得分：<span id="currentScore">0</span></div>
                <div class="controls">
                    <div class="game-settings">
                        <select id="difficultySelect" class="select-style">
                            <option value="easy">简单</option>
                            <option value="normal" selected>普通</option>
                            <option value="hard">困难</option>
                            <option value="hell">炼狱</option>
                        </select>
                        <select id="mapSizeSelect" class="select-style">
                            <option value="small">小地图</option>
                            <option value="medium" selected>中等地图</option>
                            <option value="large">大地图</option>
                            <option value="huge">超大地图</option>
                        </select>
                    </div>
                    <button class="btn" id="startBtn">开始游戏</button>
                    <button class="btn" id="pauseBtn">暂停</button>
                </div>
                <div class="leaderboard">
                    <h3>排行榜</h3>
                    <ul class="leaderboard-list" id="leaderboardList">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src="game.js"></script>
</body>
</html>
<style>
    .game-settings {
        margin-bottom: 15px;
    }

    .select-style {
        padding: 8px;
        margin: 5px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: white;
        cursor: pointer;
        font-family: 'Microsoft YaHei', sans-serif;
    }

    .select-style:hover {
        border-color: #4CAF50;
    }

    .select-style:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 5px rgba(76,175,80,0.3);
    }
</style>